import React, { Component } from 'react';
import { base, getMultiLang } from 'nc-lightapp-front';
const { NCTable, NCModal, NCButton, NCMenu, NCDiv } = base;
import './index.less';
let columns_report = [
	{
		title: (<div fieldid ="serial">{''}</div>) /* 国际化处理： 序号*/,
		dataIndex: 'serial',
		key: 'serial',
		render: (text, record, index) => <div fieldid ="serial">{text ? text : <span>&nbsp;</span>}</div>
	},
	{
		title: (<div fieldid ="notQualified">{''}</div>) /* 国际化处理： 月检查不合格单据*/,
		dataIndex: 'notQualified',
		key: 'notQualified',
		render: (text, record, index) => <div fieldid ="notQualified">{text ? text : <span>&nbsp;</span>}</div>
	},
	{
		title: (<div fieldid ="result">{''}</div>) /* 国际化处理： 检查结果*/,
		dataIndex: 'result',
		key: 'result',
		render: (text, record, index) => <div fieldid ="result">{text ? text : <span>&nbsp;</span>}</div>
	}
];
let emptyFunc = () => <span />; /* 国际化处理： 没有结账报告*/

const NCSubMenu = NCMenu.NCSubMenu;

export default class ReportModal extends Component {
	constructor(props) {
		super(props);
		this.state = {
			current: '',
			tableData: [],
			reportTableData: [],
			json: {}
		};
	}
	componentWillMount() {
		let callback = (json) => {
			this.setState({ json: json }, () => {
				columns_report = [
					{
						title: (<div fieldid ="serial">{this.state.json['public-000028']}</div>) /* 国际化处理： 序号*/,
						dataIndex: 'serial',
						key: 'serial',
						render: (text, record, index) => <div fieldid ="serial">{text ? text : <span>&nbsp;</span>}</div>
					},
					{
						title: (<div fieldid ="notQualified">{this.state.json['public-000029']}</div>) /* 国际化处理： 月检查不合格单据*/,
						dataIndex: 'notQualified',
						key: 'notQualified',
						render: (text, record, index) => <div fieldid ="notQualified">{text ? text : <span>&nbsp;</span>}</div>
					},
					{
						title: (<div fieldid ="result">{this.state.json['public-000030']}</div>) /* 国际化处理： 检查结果*/,
						dataIndex: 'result',
						key: 'result',
						render: (text, record, index) => <div fieldid ="result">{text ? text : <span>&nbsp;</span>}</div>
					}
				];
				emptyFunc = () => <span>{this.state.json['public-000031']}</span>;
			});
		};
		getMultiLang({ moduleId: 'public', domainName: 'arap', currentLocale: 'simpchn', callback });
	}
	componentWillReceiveProps(nextProp) {
		if (nextProp.reportTableData) {
			if (nextProp.reportTableData != this.state.reportTableData) {
				this.setState({
					reportTableData: nextProp.reportTableData,
					tableData: []
				});
			}
		}
	}

	handleClick = (e) => {
		let reportTableData = this.state.reportTableData;
		if (reportTableData[e.key]) {
			let tableData = [];
			if (reportTableData[e.key].listReportVO) {
				tableData = reportTableData[e.key].listReportVO;
			}
			this.setState({
				current: e.key,
				tableData: tableData
			});
		}
	};

	initmodalBody = (checkedDatas) => {
		return (
			<div className="report-content">
				<div className="content-left">
					<NCMenu
						onClick={this.handleClick}
						style={{ width: 500 }}
						defaultOpenKeys={[ 'sub1' ]}
						selectedKeys={[ this.state.current ]}
						mode="inline"
					>
						<NCSubMenu
							key="sub1"
							title={
								<span>
									<span>{this.state.json['public-000024']}</span>
									{/* 国际化处理： 财务组织*/}
								</span>
							}
						>
							{checkedDatas.map(function(item) {
								return <NCMenu.Item key={item.pk_org_v?item.pk_org_v:item.pk_org}>{item.pk_orgName}</NCMenu.Item>;
							})}
						</NCSubMenu>
					</NCMenu>
				</div>
				<NCDiv fieldid="ncc" areaCode={NCDiv.config.TABLE} className="content-right"> 
					<NCTable
						columns={columns_report}
						bordered
						isDrag
						data={this.state.tableData}
						bodyStyle={{height:'370px'}}
						scroll={{
							x: columns_report.length > 8 ? 100 + (columns_report.length - 8) * 15 + '%' : '100%',
							y: 370
						}}
					/>
				</NCDiv>
			</div>
		);
	};

	render() {
		let { showReportModal, handleOpenOrClose, checkedDatas, reportTableData, batchCloseAccount } = this.props;
		return (
			<div id="finalTreatment_report">
				<NCModal fieldid="settleAccounts" className="msg-modal" show={showReportModal} onHide={handleOpenOrClose}>
					<NCModal.Header closeButton>
						<NCModal.Title >{`${this.state.json['public-000032']}`}</NCModal.Title>
						{/* 国际化处理： 结账报告*/}
					</NCModal.Header>
					<NCModal.Body>{this.initmodalBody(checkedDatas)}</NCModal.Body>
					<NCModal.Footer>
						<NCButton fieldid="complete" colors="primary" onClick={batchCloseAccount}>
							{this.state.json['public-000033']}
							{/* 国际化处理： 完成结账*/}
						</NCButton>
					</NCModal.Footer>
				</NCModal>
			</div>
		);
	}
}
